<template>
  <div id="newss">
    <div class="one" v-for="book in books" :key="book.id">
      <div class="zhong">
        <div class="one1">
          {{ book.wenben1 }} <span :class="book.ico" v-if="book.ico"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      id: 0,
      books: [],
    };
  },
  created() {
    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:3000/shezhi");
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log("xhr.responseText", xhr.responseText);
        this.books = JSON.parse(xhr.responseText);
      }
    };
    xhr.send();
  },
};
</script>

<style>
#newss {
  width: 100%;
  /* background-color: crimson; */
}
#newss .one {
  width: 100%;
  height: 3rem;
}
 #newss .zhong {
  width: 100%;
  height: 100%;
}
#newss .one1 {
  color: #000;
  height: 3rem;
  line-height: 3rem;
  display: flex;
  justify-content: space-between;
}
#newss .one1 span {
  margin-right: 6rem;
}
</style>
